<template>
  <div style="padding: 0 6px;">
    <flexbox :gutter="0">
      <flexbox-item >
        <div class="flex-demo" style="width: 100%;">
          <img src="src/assets/images/index/Hotseller/xian.png" alt="" class="img">
        </div>
      </flexbox-item>
      <flexbox-item :span="3"><div class="flex-demo" style="text-align: center">美食广场</div></flexbox-item>
      <flexbox-item >
        <div class="flex-demo" style="width: 100%;">
          <img src="src/assets/images/index/Hotseller/xian.png" alt="" class="img">
        </div>
      </flexbox-item>
    </flexbox>
    <flexbox v-for="item in delicacy" style="padding-top: 10px">
      <flexbox-item :span="3">
        <div class="flex-demo" style="width: 100%;">
          <img :src="item.url" alt="" class="img">
        </div>
      </flexbox-item>
      <flexbox-item>
        <div class="flex-demo">
          <div>{{item.tit}}</div>
          <div>
            <x-icon type="ios-star" size="20" v-for="i in item.hot" class="hongxing"></x-icon>
            <x-icon type="ios-star-outline" size="20" v-for="o in (5-item.hot)" class="hongxing"></x-icon>
          </div>
          <div class="fs12">{{item.address}}</div>
        </div>
      </flexbox-item>
      <flexbox-item :span="2">
        <div class="flex-demo fs12">{{item.price}}</div>
      </flexbox-item>
    </flexbox>
    <div>
      <x-icon type="ios-star" size="20" class="hongxing"></x-icon>
    </div>
  </div>
</template>

<script>
  import { Flexbox, FlexboxItem, Divider } from 'vux'
  const delicacy= [
    {
      url: 'src/assets/images/index/Delicacy/ms-1.png',
      tit: '宝坤烧烤',
      address: '齐齐哈尔市龙沙区彩虹街道青云街233号',
      hot: 4,
      price: '￥188/人'
    },
    {
      url: 'src/assets/images/index/Delicacy/ms-2.png',
      tit: '金三顺韩式炭火烤肉店',
      address: '齐齐哈尔市龙沙区彩虹街道青云街233号',
      hot: 3,
      price: '￥38/人'
    },
    {
      url: 'src/assets/images/index/Delicacy/ms-3.png',
      tit: '袁记串串香',
      address: '齐齐哈尔市龙沙区彩虹街道青云街233号',
      hot: 5,
      price: '￥68/人'
    }
  ]
  export default {
    name: "Delicacy",
    components: {
      Flexbox,
      FlexboxItem,
      Divider
    },
    data(){
      return{
        delicacy: delicacy
      }
    }
  }
</script>

<style scoped>
  .img{
    width: inherit;
    height: auto;
    display: block;
  }
  .hongxing{
    fill: #ff990e
  }
</style>
